<template>
  <view class="content">
    <view class="empty" />
    <view class="username">
      <text>{{ user?.name }}</text>
      <view class="deptname">
        <text>（{{ user?.organization.name }}）</text>
      </view>
    </view>
    <view class="message">
      <text>{{ $t('index.message.welcome') }}</text>
      <je-icon icon="fal fa-rocket-launch" />
    </view>
    <view class="bottom">
      <button class="button-view" @click="onSettingsClick">
        {{ $t('index.settings.title') }}
      </button>
      <button type="primary" class="button-view" @click="onLogoutClick">
        {{ $t('index.button.logout') }}
      </button>
    </view>
  </view>
</template>

<script>
  import { logout, useI18n } from '@/service/helper';
  import { computed } from 'vue';
  import { useGlobalStore } from '@/service/store/global-store';
  export default {
    options: { styleIsolation: 'shared' },
    // #ifdef MP-WEIXIN
    onShow() {
      uni.hideHomeButton?.();
    },
    // #endif
    setup() {
      const { t: $t } = useI18n();
      const globalStore = useGlobalStore();
      const user = computed(() => {
        return globalStore.currentAccount?.realUser;
      });
      const onLogoutClick = () => {
        uni.showModal({
          content: $t('index.message.confirmLogout'),
          success: function (res) {
            if (res.confirm) {
              logout();
            }
          },
        });
      };
      const onSettingsClick = () => {
        uni.navigateTo({
          url: '/pages/index/settings',
        });
      };
      return { user, onLogoutClick, onSettingsClick };
    },
  };
</script>

<style lang="scss">
  .content {
    text-align: center;
    padding: 20px;
    color: $je-text-color;
    .empty {
      height: 10vh;
    }
    .username {
      font-size: 36px;
      margin-bottom: 20px;
      font-weight: bold;
      .deptname {
        font-size: 16px;
      }
    }
    .message {
      font-size: 24px;
      .je-icon {
        margin-left: 5px;
        color: $je-primary-color;
      }
    }
    .bottom {
      position: fixed;
      bottom: 10vh;
      left: 40px;
      right: 40px;
      .button-view {
        $border-radius: 25px;
        border-radius: $border-radius;
        height: 50px;
        margin-bottom: 10px;
        &::after {
          border-radius: calc($border-radius * 2);
        }
      }
    }
  }
</style>
